<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <script src="../js/lib/mdui.min.js"></script>
    <script src="../js/lib/jquery-3.2.1.slim.min.js"></script>
    <script src="../js/lib/holder.min.js"></script>
    <script src="../js/lib/highlight.pack.js"></script>
    <script src="../js/lib/mustache.js"></script>
    <script src="../js/lib/jquery.media.js"></script>
    <script src="../js/docs.js"></script>
    <script src="../js/init.js"></script>
    <script src="../js/listfile.js"></script>
    <link rel="stylesheet" href="../css/mdui.min.css">
    <link rel="stylesheet" href="../css/github-gist.css">
    <link rel="stylesheet" href="../css/railscasts.css">
    <link rel="stylesheet" href="../css/docs.css">
    <link rel="stylesheet" href="../css/mdui.min.css"/>
    <title>欢迎使用STdisk - 集中管理您的所有文件</title>
</head>

<body class=" mdui-drawer-body-left mdui-appbar-with-toolbar mdui-theme-accent-pink mdui-loaded mdui-theme-primary-blue">
<div class="mdui-appbar mdui-appbar-fixed">
    <div class="mdui-toolbar mdui-color-theme">
        <a href="javascript:" class="mdui-btn mdui-btn-icon" mdui-drawer="{target: '#main-drawer'}"><i
                class="mdui-icon material-icons">menu</i></a>
        <a href="../index.html" class="mdui-typo-headline">STdisk</a>
        <div class="mdui-toolbar-spacer"></div>
        <span class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white" mdui-dialog="{target: '#dialog-docs-theme'}"
              mdui-tooltip="{content: '设置主题'}"><i class="mdui-icon material-icons">color_lens</i></span>
        <a id="logout" class="mdui-btn mdui-btn-icon" mdui-tooltip="{content: '登出'}"><i
                class="mdui-icon material-icons">call_missed</i></a>
    </div>
</div>
<div class="mdui-drawer" id="main-drawer">
    <ul class="mdui-list" id="choosePage">
        <li class="mdui-list-item mdui-ripple mdui-list-item-active">
            <div class="mdui-list-item-content">我的资料</div>
            <i class="mdui-list-item-icon mdui-icon material-icons">person</i>
        </li>
        <div class="mdui-divider"></div>
        <li class="mdui-list-item mdui-ripple">
            <div class="mdui-list-item-content">我的网络硬盘</div>
            <i class="mdui-list-item-icon mdui-icon material-icons">insert_drive_file</i>
        </li>
        <li class="mdui-list-item mdui-ripple">
            <div class="mdui-list-item-content">我的共享</div>
            <i class="mdui-list-item-icon mdui-icon material-icons">share</i>
        </li>
        <li class="mdui-list-item mdui-ripple">
            <div class="mdui-list-item-content">最近文件</div>
            <i class="mdui-list-item-icon mdui-icon material-icons">history</i>
        </li>
        <div class="mdui-divider"></div>
        <li class="mdui-list-item mdui-ripple ">
            <div class="mdui-list-item-content ">回收站</div>
            <i class="mdui-list-item-icon mdui-icon material-icons">delete</i>
        </li>
    </ul>
</div>
<div class="mdui-container mdui-m-t-5">
    <div class="mdui-row">
        <div class="mdui-col-sm-8 mdui-col-offset-sm-2">
            <div class="mdui-grid-tile mdui-shadow-2">
                <img src="../img/card.jpg"/>
                <div class="mdui-grid-tile-actions">
                    <div class="mdui-grid-tile-text" id="user-card">

                    </div>
                    <div class="mdui-grid-tile-buttons">
                        <button class="mdui-btn mdui-btn-raised mdui-ripple"
                                mdui-dialog="{target: '#dialog'}">获取公开链接
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script language="JavaScript">
    function get_user_card() {
        let card = $("#user-card"); // 获取内容框
        $.ajax({
            url: tem + "/template/user_card_template.html",
            type: "GET",
            dataType: 'html',
            success: function (template) {
                $.ajax({
                    url: api + "/api/getspace",
                    type: "GET",
                    dataType: "json",
                    success: function (data) {
                        if (data.used > data.total) {
                            data.percent = 100;
                        } else {
                            data.percent = parseInt((data.used / data.total) * 100);
                        }
                        data.usedStr = bytesToSize(data.used);
                        data.totalStr = bytesToSize(data.total);
                        data.publicURL = "../html/public.html#" + data.uuid;
                        card.html(Mustache.render(template, data));
                    }
                });
            }
        });
    }
    $(document).ready(function () {
        get_user_card();
    });
</script>
</body>
</html>